<template>
  <div class="login-container">
    <div
      id="myCharts66"
      class="map-box"
    />
  </div>
</template>

<script>
const shandongJson = require('./shandong.json')
export default {
  name: 'LoginIndex',
  components: {},
  props: {},
  data() {
    return {
      // 这里放你打点的坐标信息，虚拟信息
      geoCoordMap: {
        莱芜市: [117.678856, 36.223361],
        威海市: [122.121804, 37.524054],
        滨州市: [117.982412, 37.392056],
        临沂市: [118.364156, 35.119965],
        淄博市: [118.069799, 36.82475],
        日照市: [119.532384, 35.425496],
        烟台市: [121.454902, 37.480081],
        菏泽市: [115.48038, 35.248354],
        青岛市: [120.397057, 36.07041],
        东营市: [118.681509, 37.447084],
        潍坊市: [119.164438, 36.71744],
        济南市: [117.122338, 36.661876],
        聊城市: [115.986305, 36.465225],
        泰安市: [117.090143, 36.212179],
        枣庄市: [117.329308, 34.824652],
        济宁市: [116.588817, 35.433025]
      },
      locValue: [
        { name: '莱芜市', value: '100' },
        { name: '威海市', value: '50' },
        { name: '滨州市', value: '20' },
        { name: '临沂市', value: '90' },
        { name: '淄博市', value: '170' },
        { name: '日照市', value: '190' },
        { name: '德州市', value: '160' },
        { name: '烟台市', value: '140' },
        { name: '菏泽市', value: '130' },
        { name: '青岛市', value: '110' },
        { name: '东营市', value: '105' },
        { name: '潍坊市', value: '142' },
        { name: '济南市', value: '80' },
        { name: '聊城市', value: '184' },
        { name: '泰安市', value: '155' },
        { name: '枣庄市', value: '130' },
        { name: '济宁市', value: '140' }
      ],
      res: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.convertData()
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    // 处理geoCoordMap数据结构
    // convertData() {
    //   let data = this.geoCoordMap;
    //   let reso = [];
    //   Object.keys(data).forEach((key) => {
    //     console.log(key, data[key]);
    //     reso.push({
    //       name: key,
    //       value: data[key],
    //     });
    //   });
    //   this.res = reso
    //   console.log(reso.slice(0,4));
    // },
    convertData(geoCoordMap, data) {
      var res = []
      if (data) {
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name]
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            })
          }
        }
      }
      console.log(res.slice(0, 4))
      return res
    },

    drawLine() {
      const myCharts66 = this.$echarts.init(
        document.getElementById('myCharts66')
      )
      this.$echarts.registerMap('shandong', shandongJson)
      myCharts66.setOption({
        backgroundColor: '#404a59',
        title: {
          text: '点展示',
          x: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        // 鼠标以上事件
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            return params.name + ' : ' + params.value[2]
          },
          extraCssText: 'height:200px;'
        },
        // 右下角标题
        legend: {
          orient: 'vertical',
          y: 'bottom',
          x: 'right',
          data: ['pm2.5'],
          textStyle: {
            color: '#fff'
          }
        },
        visualMap: {
          show: true,
          x: 'left',
          y: 'bottom',
          splitList: [
            { start: 500, end: 600 },
            { start: 400, end: 500 },
            { start: 300, end: 400 },
            { start: 101, end: 150 },
            { start: 51, end: 100 },
            { start: 0, end: 50 }
          ],
          color: ['#45C2E0', '#C1EBDD', '#FFC851', '#5A5476', '#1869A0']
        },
        geo: {
          map: 'shandong',
          roam: true,
          //   控制地图视角
          aspectScale: 1,
          label: {
            emphasis: {
              show: true,
              color: '#fff'
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#323c48',
              borderColor: '#111'
            },
            emphasis: {
              areaColor: '#2a333d'
            }
          }
        },
        series: [
          {
            name: 'pm2.5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: this.convertData(this.geoCoordMap, this.locValue).slice(0, 4),
            symbolSize: 12,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              emphasis: {
                borderColor: '#fff',
                borderWidth: 1
              }
            }
          },
          {
            name: 'pm2.5',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: this.convertData(this.geoCoordMap, this.locValue).slice(4, 8),
            symbolSize: 12,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              emphasis: {
                borderColor: '#fff',
                borderWidth: 1
              }
            }
          },
          {
            // 没有visualMap的情况，同颜色大小标识不同的等级
            name: 'pm2.5',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: this.convertData(this.geoCoordMap, this.locValue).slice(8, 12),
            symbolSize: function(val) {
              return val[2] / 10
            },
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: false
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#ddb926'
              }
            }
          },
          {
            name: 'pm2.5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: this.convertData(this.geoCoordMap, this.locValue).slice(12, 18),
            symbolSize: function(val) {
              return val[2] / 10
            },
            showEffectOn: 'emphasis',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#f4e925',
                shadowBlur: 10,
                shadowColor: '#333'
              }
            },
            zlevel: 1
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang="scss">
.login-container {
  margin-top: 50px;
}
.map-box {
  width: 800px;
  height: 800px;
  background-color: #ccc;
}
</style>

